<template>
	<view class="container-root">
		<view class="product-combox">
			<text class="product-cable">卡号：</text>
			<xfl-select class="product-select"
					:list="list"
					:clearable="false"
					:showItemNum="5" 
					:listShow="false"
					:isCanInput="false"  
					:style_Container="'height: 100rpx; font-size: 16px;'"
					:placeholder = "'placeholder'"
					:initValue="list[0]"
					:selectHideType="'hideAll'"
					@change="onSelect"
				>
			 </xfl-select>
		</view>
		<scroll-view class="product-root" scroll-y="true">
			<view class="product-item-layer" v-for="(item,index) in productBuyInfos" :key='index' hover-class='product-item-hover' hover-stay-time='50' @tap="onClickItem(index)">
				<text class="product-title">{{item.productname}}</text>
				<view>
					<text>到期时间:</text>
					<text class='product-time'>{{item.endtime}}</text>
				</view>
				<view class="line"></view>
			</view>
			<view class=""></view>
		</scroll-view>	
	</view>

	
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import httpRequest from '@/utils/utilHttp.js'
	
	import xflSelect from '@/components/xfl-select/xfl-select.vue'


	export default {
		components: {
			xflSelect
		},
		data() {
			return {
				list: [],    //要展示的数据					
				stbInfo: [], // 终端信息
				productBuyInfos:[],// 终端已购产品
				isShowEmpty: false, // 无内容提示
			}
		},
		computed:{
			...mapState(['userInfo','token']),
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:"已购产品",
			})
			//console.log('已购买产品页面进入。。。。。')
			let self = this;
			if(!self.userInfo){
				return;
			}
			if(self.userInfo.type === '1')
			{
				self.getCardListByType();
			}
			else if(self.userInfo.stbInfo.length > 0){
				//console.log('获取购买信息');
				//console.log(self.userInfo.stbInfo[0].stbno);
				self.getBuyInfo(self.userInfo.stbInfo[0].stbno);
				self.stbInfo = self.userInfo.stbInfo;
			}
			
			for(var i =0; i < self.stbInfo.length; i++)
			{
				self.list.push(self.stbInfo[i].stbno);
			}
			//console.log('load data:')
			//console.log(self.productBuyInfos);
			//console.log(self.list)
		},
		methods: {
			...mapMutations(['login', 'logout']), //对全局方法 login进行监控
			getBuyInfo:function(terminalid){
				var self = this;
				var params = {
					userCode: self.userInfo.userCode,
					userlevel: self.userInfo.userlevel,
					token: self.token,
					nitId: self.userInfo.netId,
					terminalid: terminalid,
				};
				let options = {
					url:httpRequest.requestUrl.productBuyInfo_get,
					method:httpRequest.requestMethod.GET,
					datas:params
				};
				httpRequest.Request(options).then(res => {
					//console.log(res);
					if (res.data.status == 200) {
						self.productBuyInfos = res.data.content;
					}
					else{
						self.isShowEmpty = true;
					}
				});
			},
			getProductById(productId, type, endtime){
				var self = this;
				var params = {
				    "id": productId,
				    "userlevel": self.userInfo.userLevel,
				    "netid":self.userInfo.netId,
				    "type": type === '1' ? 'product' : type === '2' ?'service':type === '3'?'event':'',
				};
				let options = {
					url:httpRequest.requestUrl.productById_get,
					method:httpRequest.requestMethod.GET,
					datas:params
				};	
				httpRequest.Request(options).then(res => {
					//console.log(res);
					if(res.statusCode === 200){
						if (res.data.status == 200) {	
							console.log('purchese product...')
							// var productData = new Array();
							// productData.push(res.data.content)
							var productData = res.data.content
							console.log(productData)
							uni.navigateTo({
								url:'/pages/businessDetails/businessDetails?itemList=' + encodeURIComponent(JSON.stringify(productData)) + "&isBuy=false&expiryTime=" + endtime,
							})
						}
						else{
							uni.showToast({
								title: '产品详情获取失败!',
								icon: 'none'
							});
						}
					}
					else{
						uni.showToast({
						    title: '请求错误，code=' + res.statusCode,
						    icon: "none"
						})
					}
				});
			},
			getCardListByType(){
				var self = this;
				var params = {
					userCode: self.userInfo.userCode,
					token: self.userInfo.token,
					type: 1, // 0 未授权  1 已授权
				};
				let options = {
					url:httpRequest.requestUrl.getCardListByType_get,
					method:httpRequest.requestMethod.GET,
					datas:params
				};
				httpRequest.Request(options).then(res => {
					//console.log(res);
					if (res.data.status == 200 && res.data.content.length > 0) {
						self.productBuyInfos = res.data.content;
						self.stbInfo = res.data.content;
						self.getBuyInfo(self.stbInfo[0].stbno);
					}					
				});
			},
			onClickItem(index){
				let self = this;
				//console.log(index);
				let productid = self.productBuyInfos[index].productid;
				let type = self.productBuyInfos[index].type;
				let endtime = self.productBuyInfos[index].endtime;
				//console.log(productid);
				//console.log(type);
				//console.log(endtime);
				self.getProductById(productid, type, endtime);
			},
			onSelect(e){
				//console.log('change.....');
				//console.log(e.index);
				var position = parseInt(e.index);
				this.getBuyInfo(this.stbInfo[position].stbno);
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1;
	}
	.product-combox{
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		font-size: 32rpx;
		border: 1rpx solid #C0C0C0;
		border-radius: 20rpx;
	}
	.product-cable{	
		flex:2;
		align-items: center;
		justify-content: center;
		padding-left: 20rpx;
		padding-top: 25rpx;
		background-color: white;
		border: 1rpx solid #C0C0C0;
		border-radius: 10rpx;
	}
	.product-root{
		width: 100%;
		background-color: white;
		top: 100rpx;
		height: calc(100vh - 120rpx);
		color: #333;
	}
	.product-item-layer{
		font-size: 32rpx;
		display: flex;
		flex-direction: column;
		padding: 10rpx 0rpx 0rpx 20rpx;
		margin-bottom: 2rpx;
	}
	.product-item-hover{
		background-color: #e3e3e5;
	}
	.product-title{
		font-size: 36rpx;
		margin-bottom: 5px;
	}
	.product-select{
		width: 80%;
		height: 100%;
		display: flex;
		//flex:2;
	}
	.product-time{
		color: #f39826;
		margin: 20rpx;
	}
	.line {
	  width: 100%;
	  height: 1rpx;
	  margin-top: 10rpx;
	  margin-bottom: 10rpx;
	  background-color: #e3e3e5;
	}
</style>
